<template>
    <div class="container">
        <div class="menu-wrapper">
            <el-row>
                <el-col :span="4" class="tree-box">
                    <div class="tree-box-header">
                        菜单树
                    </div>
                    <div class="tree-box-body">
                        <el-tree :data="tree" node-key="id" ref="tree"
                                 v-loading="loadingTree"
                                 highlight-current
                                 :check-strictly="true"
                                 :default-expand-all="true"
                                 :props="defaultProps"
                                 @node-click="handleNodeClick"
                        ></el-tree>
                    </div>
                </el-col>

                <el-col :span="20" class="content-box">
                    <el-row>
                        <el-col>
                            <div class="btn-wrapper">
                                <el-button type="primary" size="medium" icon="el-icon-plus" @click="handleCreate">添加</el-button>
                                <el-button type="primary" size="medium" icon="el-icon-edit" @click="handleUpdate">修改</el-button>
                                <el-button type="danger" size="medium" icon="el-icon-delete" @click="handleDelete">删除</el-button>
                                <el-button type="primary" size="medium" icon="el-icon-mars-reset" @click="handleResetFilter">刷新</el-button>
                                <el-button type="primary" size="medium" icon="el-icon-mars-reset" @click="handleCreatePermission" :disabled="detail.id?false:true">添加权限</el-button>
                                <el-button type="danger" size="medium" icon="el-icon-delete" @click="handleDeletePermission">批量删除</el-button>
                                <el-button type="primary" size="medium" icon="el-icon-mars-reset" @click="handleGenerateDefaultPermission" :disabled="detail.id?false:true">生成默认权限</el-button>
                            </div>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col>
                            <div class="detail-wrapper">
                                <el-form ref="detail" :model="detail" label-width="120px">

                                    <el-form-item label="所属上级">
                                        <el-input v-model="detail.parentName" placeholder="无上级" readonly style="width: 60%;"></el-input>
                                    </el-form-item>
                                    <el-form-item label="菜单名称" prop="name">
                                        <el-input v-model="detail.name" placeholder="菜单名称" style="width: 60%;"></el-input>
                                    </el-form-item>
                                    <el-form-item label="资源地址" prop="resource">
                                        <el-input v-model="detail.resource" placeholder="资源地址" style="width: 60%;"></el-input>
                                    </el-form-item>
                                    <el-form-item label="前端组件" prop="component">
                                        <el-input v-model="detail.component" placeholder="前端组件" style="width: 60%;"></el-input>
                                    </el-form-item>
                                    <el-form-item label="前端地址" prop="path">
                                        <el-input v-model="detail.path" placeholder="iFrame嵌套地址" style="width: 60%;"></el-input>
                                    </el-form-item>
                                    <el-form-item label="请求方法" prop="path">
                                        <el-radio-group v-model="detail.method">
                                            <el-radio label="GET" border size="medium">GET</el-radio>
                                            <el-radio label="POST" border size="medium">POST</el-radio>
                                            <el-radio label="PUT" border size="medium">PUT</el-radio>
                                            <el-radio label="DELETE" border size="medium">DELETE</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="状态" prop="path">
                                        <el-row style="color: #606266;">
                                            <el-col :span="3">
                                                <el-tag type="success" v-if="detail.status === true">正常</el-tag>
                                                <el-tag type="danger" v-else>禁用</el-tag>
                                            </el-col>
                                            <el-col :span="7">
                                                排序 <el-input-number v-model="detail.sort" :min="100" :max="9999" style="width: 150px;"></el-input-number>
                                            </el-col>
                                            <el-col :span="4" style="line-height: 40px;">
                                                图标 <i class="el-icon-share" style="margin-left: 10px;"></i>
                                            </el-col>
                                        </el-row>
                                    </el-form-item>

                                </el-form>
                            </div>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col>
                            <div class="permission-wrapper">
                                <el-row>
                                    <el-col>
                                        <el-table
                                                :data="list"
                                                border fit
                                                highlight-current-row
                                                v-loading="listLoading"
                                                element-loading-text="给我一点时间"
                                                empty-text="-"
                                                @selection-change="handleSelectionChange">

                                            <el-table-column type="selection" width="55" align="center"></el-table-column>

                                            <el-table-column label="权限名称" align="center">
                                                <template slot-scope="scope"> {{ scope.row.name }}</template>
                                            </el-table-column>
                                            <el-table-column label="权限标识" align="center">
                                                <template slot-scope="scope"> {{ scope.row.permission }}</template>
                                            </el-table-column>
                                            <el-table-column label="权限类型" align="center">
                                                <template slot-scope="scope">
                                                    <el-tag type="primary" v-if="scope.row.type === '1'">页面</el-tag>
                                                    <el-tag type="success" v-if="scope.row.type === '2'">按钮</el-tag>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="排序值" align="center">
                                                <template slot-scope="scope"> {{ scope.row.sort }}</template>
                                            </el-table-column>
                                            <el-table-column label="状态" width="80px" align="center">
                                                <template slot-scope="scope">
                                                    <el-tag type="success" v-if="scope.row.status === true">正常</el-tag>
                                                    <el-tag type="danger" v-else>禁用</el-tag>
                                                </template>
                                            </el-table-column>

                                            <el-table-column label="操作" width="180px" align="center">
                                                <template slot-scope="scope">
                                                    <el-button size="small" type="primary" icon="edit" @click="handleUpdatePermission(scope.row)">编辑</el-button>
                                                    <el-button size="small" type="danger" icon="delete" @click="handleDeletePermission(scope.row)">删除                                                </el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>

            <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" @close="handleDialogClose">
                <el-row>
                    <el-col :span="5">
                        <el-tree :data="treeDialog" node-key="id" ref="treeDialog"
                                 v-loading="loadingTreeDialog"
                                 highlight-current
                                 :check-strictly="true"
                                 :default-expand-all="true"
                                 :props="defaultProps"
                                 @node-click="handleNodeClickDialog"
                        ></el-tree>
                    </el-col>

                    <el-col :span="19">
                        <el-form ref="form" :model="form" :rules="rules" label-width="120px">

                            <el-form-item label="所属上级">
                                <el-input v-model="form.parentName" placeholder="请选择所属上级" readonly style="width: 90%;">
                                    <i class="el-icon-close el-input__icon" slot="suffix" @click="handleIconRemoveClick"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="菜单名称" prop="name">
                                <el-input v-model="form.name" placeholder="菜单名称" style="width: 90%;"></el-input>
                            </el-form-item>
                            <el-form-item label="资源地址" prop="resource">
                                <el-input v-model="form.resource" placeholder="资源地址" style="width: 90%;"></el-input>
                            </el-form-item>
                            <el-form-item label="请求方法" prop="method">
                                <el-radio-group v-model="form.method">
                                    <el-radio label="GET" border size="medium">GET</el-radio>
                                    <el-radio label="POST" border size="medium">POST</el-radio>
                                    <el-radio label="PUT" border size="medium">PUT</el-radio>
                                    <el-radio label="DELETE" border size="medium">DELETE</el-radio>
                                </el-radio-group>
                                <el-button type="danger" size="mini" icon="el-icon-close" circle @click="handleClearMethod" style="margin-left:10px;"></el-button>
                            </el-form-item>
                            <el-form-item label="前端组件" prop="url">
                                <el-input v-model="form.component" placeholder="前端组件" style="width: 90%;"></el-input>
                            </el-form-item>
                            <el-form-item label="前端地址" prop="url">
                                <el-input v-model="form.path" placeholder="iFrame嵌套地址" style="width: 90%;"></el-input>
                            </el-form-item>
                            <el-form-item label="图标" prop="icon">
                                <el-input v-model="form.icon" placeholder="图标" style="width: 90%;"></el-input>
                            </el-form-item>
                            <el-form-item label="排序" prop="sort">
                                <el-input-number v-model="form.sort" :min="100" :max="9999"></el-input-number>
                            </el-form-item>
                            <el-form-item label="状态" prop="status">
                                <el-radio-group v-model="form.status">
                                    <el-radio :label="true" border size="medium">正常</el-radio>
                                    <el-radio :label="false" border size="medium">禁用</el-radio>
                                </el-radio-group>
                            </el-form-item>

                        </el-form>
                    </el-col>
                </el-row>


                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel('form')">取 消</el-button>
                    <el-button v-if="dialogStatus == 'create'" type="primary" @click="create('form')">确 定</el-button>
                    <el-button v-else type="primary" @click="update('form')">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisiblePermission" @close="handleDialogClosePermission">
                <el-form ref="formPermission" :model="formPermission" :rules="rulesPermission" label-width="120px">

                    <el-form-item label="权限名称" prop="name">
                        <el-input v-model="formPermission.name" placeholder="权限名称" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="权限标识" prop="permission">
                        <el-input v-model="formPermission.permission" placeholder="权限标识" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="类型" prop="type">
                        <el-radio-group v-model="formPermission.type">
                            <el-radio :label='"1"' border size="medium">菜单</el-radio>
                            <el-radio :label='"2"' border size="medium">按钮</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="排序" prop="sort">
                        <el-input-number v-model="formPermission.sort" :min="100" :max="9999" size="medium"></el-input-number>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="formPermission.status">
                            <el-radio :label="true" border size="medium">正常</el-radio>
                            <el-radio :label="false" border size="medium">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="备注" prop="remarks">
                        <el-input v-model="formPermission.remarks" placeholder="备注" style="width: 80%;"></el-input>
                    </el-form-item>

                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel('formPermission')">取 消</el-button>
                    <el-button v-if="dialogStatus == 'createPermission'" type="primary" @click="createPermission('formPermission')">确 定</el-button>
                    <el-button v-else type="primary" @click="updatePermission('formPermission')">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="生成默认的菜单权限" :visible.sync="dialogFormVisibleGeneratePermission">
                <el-form ref="formGeneratePermission" :model="formGeneratePermission" :rules="rulesGeneratePermission" label-width="120px">

                    <el-form-item label="权限前缀" prop="prefix">
                        <el-input v-model="formGeneratePermission.prefix" placeholder="权限名称" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="默认权限" prop="permissions">
                        <el-checkbox-group v-model="formGeneratePermission.permissions">
                            <el-checkbox label="ui" border>页面</el-checkbox>
                            <el-checkbox label="add" border>添加</el-checkbox>
                            <el-checkbox label="delete" border>删除</el-checkbox>
                            <el-checkbox label="update" border>修改</el-checkbox>
                            <el-checkbox label="page" border>分页浏览</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel('formGeneratePermission')">取 消</el-button>
                    <el-button type="primary" @click="GenerateDefaultPermissionAction('formGeneratePermission')">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {created, updated, deleted, selectOne, selectList, selectTree} from '@/api/system/menu'
    import {
        created as createdPermission,
        updated as updatedPermission,
        deleted as deletedPermission,
        selectOne as selectOnePermission,
        findPermissionByMenuId,
        generateDefaultPermission
    } from '@/api/system/permission'
    import valid from '@/rules'

    export default {
        name: 'Menu',
        data() {
            let required = valid.required()
            return {
                tree: null,
                treeDialog: null,
                loadingTree: false,
                loadingTreeDialog: false,
                dialogFormVisible: false,
                dialogStatus: '',
                textMap: {update: '编辑', create: '创建', createPermission: '添加权限', updatePermission: '编辑权限'},
                defaultProps: {
                    label: 'name',
                    children: 'children'
                },
                form: {
                    sort: 100,
                    status: true,
                    parentName: null,
                },
                detail: {
                },
                rules: {
                    example: [required]
                },

                list: null,
                listLoading: false,
                dialogFormVisiblePermission: false,
                multipleSelection: [],
                formPermission: {
                    sort: 100,
                    type: '2',
                    status: true,
                },
                rulesPermission: {
                    example: [required]
                },

                dialogFormVisibleGeneratePermission: false,
                formGeneratePermission: {
                    permissions: ['ui', 'add', 'delete', 'update', 'page']
                },
                rulesGeneratePermission: {
                    prefix: [required],
                    permissions: [valid.required('至少选择一个')]
                },


            }
        },
        created() {
            this.getTree()
        },
        methods: {
            getTree() {//获取菜单树
                this.loadingTree = true
                selectTree().then(response => {
                    this.tree = response.data
                    this.treeDialog = response.data
                    this.loadingTree = false
                })
            },
            handleNodeClick(data, node) {
                selectOne(node.data.id).then(response => {
                    this.detail = Object.assign({}, response.data.data)
                    this.detail.parentName = node.parent.data.name
                    this.formPermission.menuId = node.data.id

                    this.getListPermission(node.data.id)
                })
            },
            handleClearMethod() {
                this.form.method = ''
            },
            handleNodeClickDialog(data, node) {
                var shut = false
                var sf = this.form

                //新增菜单
                if(sf.id == undefined) {
                    this.form = Object.assign({}, this.form)
                    this.form.pid = node.data.id
                    this.form.parentName = node.data.name
                    return
                }

                //新增菜单时不执行以下程序
                //修改时上级选择错误，默认的父级菜单
                let parentNode = null
                if(sf.id) {
                    parentNode = this.$refs.tree.getNode(sf.id).parent.data
                }


                //判断是否选择自己作为上级
                if(this.form.id == data.id) {
                    if(parentNode) {//选择默认父级菜单
                        this.form.pid = parentNode.id
                        this.form.parentName = parentNode.name
                    } else {//
                        this.form.pid = null
                        this.form.parentName = null
                    }
                    this.$message({
                        title: '提示', message: '选择所属上级有误',
                        type: 'info', duration: 2000
                    })
                    return
                }
                //判断选择的上级是否当前修改的上级
                res(node)
                function res(node) {
                    if(!shut) {
                        var n = node.parent
                        if(null != n) {
                            if(sf.id == n.data.id || sf.id == n.data.pid) {
                                shut = true
                            }
                            res(n)
                        }
                    }
                }
                if(shut == true) {
                    if(parentNode) {//选择默认父级菜单
                        this.form.pid = parentNode.id
                        this.form.parentName = parentNode.name
                    } else {//
                        this.form.pid = null
                        this.form.parentName = null
                    }
                    this.$message({
                        title: '提示', message: '选择所属上级有误',
                        type: 'warning', duration: 2000
                    })
                    return
                }

                this.form = Object.assign({}, this.form)
                this.form.pid = node.data.id
                this.form.parentName = node.data.name
            },
            handleIconRemoveClick() {
                this.form.pid = null
                this.form.parentName = null
            },
            handleDialogClose() {//关闭窗口回调函数
                this.cancel('form')
            },
            handleResetFilter() {//重置过滤条件
                this.getTree()
                this.detail = {}
                this.list = null
            },


            handleCreate() {//添加数据窗口
                this.dialogStatus = 'create'
                this.dialogFormVisible = true
            },
            handleUpdate() {//修改数据窗口
                if (this.detail.id) {
                    selectOne(this.detail.id).then(response => {
                        this.dialogStatus = 'update'
                        this.dialogFormVisible = true
                        this.form = Object.assign({}, response.data.data)

                        let parentNode = this.$refs.tree.getNode(this.form.id).parent.data
                        if(parentNode) {
                            this.form.pid = parentNode.id
                            this.form.parentName = parentNode.name
                        }
                    })
                } else {
                    this.$notify({
                        title: '提示', message: '请选择需要修改的记录',
                        type: 'warning', duration: 2000
                    })
                }

            },
            handleDelete() {//批量删除数据
                if (this.detail.id) {
                    this.$confirm('确定要删除？', '提示', {
                        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
                    }).then(() => {
                        deleted(this.detail.id).then(response => {
                            if (response.data.status === 200) {
                                this.$notify({
                                    title: '提示', message: '删除成功',
                                    type: 'success', duration: 2000
                                })
                                this.getTree()
                                this.handleResetFilter()
                            } else {
                                this.$notify({
                                    title: '删除失败', message: response.data.msg,
                                    type: 'error', duration: 2000
                                })
                            }
                        })
                    }).catch(() => {
                    })
                } else {
                    this.$notify({
                        title: '提示', message: '请选择需要删除的记录',
                        type: 'warning', duration: 2000
                    })
                }

            },
            create(formName) {//添加数据
                const set = this.$refs
                set[formName].validate((valid) => {
                    if (valid) {
                        created(this.form).then(response => {
                            if (response.data.status === 200) {
                                this.$notify({
                                    title: '提示', message: '添加成功',
                                    type: 'success', duration: 2000
                                })
                                this.handleResetFilter()
                            } else {
                                this.$notify({
                                    title: '操作失败', message: response.data.msg,
                                    type: 'error', duration: 2000
                                })
                            }
                            this.dialogFormVisible = false
                        })
                    }
                })
            },
            update(formName) {//修改数据
                const set = this.$refs
                set[formName].validate((valid) => {
                    if (valid) {
                        updated(this.form).then(response => {
                            if (response.data.status === 200) {
                                this.$notify({
                                    title: '提示', message: '修改成功',
                                    type: 'success', duration: 2000
                                })
                                this.getTree()
                                this.detail = Object.assign({}, this.form)
                            } else {
                                this.$notify({
                                    title: '发生错误', message: response.data.msg,
                                    type: 'error', duration: 2000
                                })
                            }
                            this.dialogFormVisible = false
                        })
                    }
                })
            },


            handleSelectionChange(val) {//多选
                this.multipleSelection = val;
            },
            handleDialogClosePermission() {//关闭窗口回调函数
                this.cancel('formPermission')
            },
            handleCreatePermission() {//添加数据窗口
                this.dialogStatus = 'createPermission'
                this.dialogFormVisiblePermission = true
            },
            handleUpdatePermission(row) {//修改数据窗口
                selectOnePermission(row.id).then(response => {
                    this.dialogStatus = 'updatePermission'
                    this.dialogFormVisiblePermission = true
                    this.formPermission = Object.assign({}, response.data.data)
                    console.log(this.formPermission)
                })
            },
            handleDeletePermission(row) {//批量删除数据
                let ids = []
                if (row.id != undefined) {
                    ids.push(row.id)
                } else {
                    if (this.multipleSelection.length > 0) {
                        for (let item of this.multipleSelection) {
                            ids.push(item.id)
                        }
                    }
                }
                if (ids.length <= 0) {
                    this.$notify({
                        title: '提示', message: '请选择需要删除的记录',
                        type: 'warning', duration: 2000
                    })
                } else {
                    this.$confirm('确定要删除？', '提示', {
                        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
                    }).then(() => {
                        deletedPermission({idList: ids}).then(response => {
                            if (response.data.status === 200) {
                                this.$notify({
                                    title: '提示', message: '删除成功',
                                    type: 'success', duration: 2000
                                })
                                this.getListPermission(this.detail.id)
                            } else if(response.data.status === 601) {
                                this.$notify({
                                    title: '提示', message: response.data.msg,
                                    type: 'warning', duration: 2000
                                })
                            } else {
                                this.$notify({
                                    title: '删除失败', message: response.data.msg,
                                    type: 'error', duration: 2000
                                })
                            }
                        })
                    }).catch(() => {
                    })
                }
            },
            getListPermission(menuId) {//查询分页列表
                if(menuId) {
                    this.listLoading = true
                    findPermissionByMenuId(menuId).then(response => {
                        if (response.data.status === 200) {
                            this.list = response.data.data
                            this.listLoading = false
                        } else {
                            this.$notify({
                                title: '发生错误', message: response.data.msg,
                                type: 'error', duration: 2000
                            })
                            this.listLoading = false
                        }
                    }).catch(error => {
                        this.listLoading = false
                    })
                }
            },
            createPermission(formName) {//添加数据
                const set = this.$refs
                set[formName].validate((valid) => {
                    if (valid) {
                        createdPermission(this.formPermission).then(response => {
                            if (response.data.status === 200) {
                                this.$notify({
                                    title: '提示', message: '添加成功',
                                    type: 'success', duration: 2000
                                })
                                this.getListPermission(this.detail.id)
                            } else if(response.data.status === 601) {
                                this.$notify({
                                    title: '提示', message: response.data.msg,
                                    type: 'warning', duration: 2000
                                })
                            } else {
                                this.$notify({
                                    title: '操作失败', message: response.data.msg,
                                    type: 'error', duration: 2000
                                })
                            }
                            this.dialogFormVisiblePermission = false
                        })
                    }
                })
            },
            updatePermission(formName) {//修改数据
                const set = this.$refs
                set[formName].validate((valid) => {
                    if (valid) {
                        updatedPermission(this.formPermission).then(response => {
                            if (response.data.status === 200) {
                                this.$notify({
                                    title: '提示', message: '修改成功',
                                    type: 'success', duration: 2000
                                })
                                this.getListPermission(this.detail.id)
                            } else if(response.data.status === 601) {
                                this.$notify({
                                    title: '提示', message: response.data.msg,
                                    type: 'warning', duration: 2000
                                })
                            } else {
                                this.$notify({
                                    title: '发生错误', message: response.data.msg,
                                    type: 'error', duration: 2000
                                })
                            }
                            this.dialogFormVisiblePermission = false
                        })
                    }
                })
            },

            handleGenerateDefaultPermission() {
                this.dialogFormVisibleGeneratePermission = true
                this.formGeneratePermission.menuId = this.detail.id

            },
            GenerateDefaultPermissionAction(formName) {
                const set = this.$refs
                set[formName].validate((valid) => {
                    if (valid) {
                        generateDefaultPermission(this.formGeneratePermission).then(response => {
                            if (response.data.status === 200) {
                                this.$notify({
                                    title: '提示', message: '修改成功',
                                    type: 'success', duration: 2000
                                })
                                this.getListPermission(this.detail.id)
                                this.cancel(formName)
                            } else if(response.data.status === 601) {
                                this.$notify({
                                    title: '提示', message: response.data.msg,
                                    type: 'warning', duration: 2000
                                })
                            } else {
                                this.$notify({
                                    title: '发生错误', message: response.data.msg,
                                    type: 'error', duration: 2000
                                })
                            }
                            this.dialogFormVisibleGeneratePermission = false
                        })
                    }
                })

            },

            cancel(formName) {
                this.dialogFormVisible = false
                this.dialogFormVisiblePermission = false
                this.dialogFormVisibleGeneratePermission = false
                const set = this.$refs
                set[formName].resetFields()
                this.form = {
                    sort: 100,
                    status: true,
                    parentName: null
                }
                this.formPermission = {
                    sort: 100,
                    type: '2',
                    status: true,
                    menuId: this.detail.id
                }
                this.formGeneratePermission = {
                    permissions: ['ui', 'add', 'delete', 'update', 'page']
                }
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .menu-wrapper{
        border: 1px solid #e9eaec;
        background: #fff;
        border-radius: 4px;
        font-size: 14px;
        position: relative;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;

        .tree-box{
            &-header {
                padding-left: 10px;
                height: 50px;
                line-height: 50px;
                border-bottom: 1px solid #dcdcdc;
            }
            &-body{
            }
        }

        .content-box{
            border-left: 1px solid #dcdcdc;
            .btn-wrapper{
                padding-left: 10px;
                line-height: 50px;
                border-bottom: 1px solid #dcdcdc;
            }

            .detail-wrapper{
                padding-top: 10px;
                padding-left: 10px;
            }

            .permission-wrapper{
                padding: 10px;
                margin-top: 10px;
                margin-bottom: 10px;
            }
        }
    }

</style>